<template>
    <p>Home</p>
    <p>js跳转</p>
    <button @click="pushStr">push-字符串-调转</button>
    <button @click="pushPath">push-路径-调转</button>
    <button @click="pushName">push-名字-调转</button>

    <p>传递参数</p>
    <button @click="pushNameParams">push-名字-params-跳转</button>
    <button @click="pushPathQuery">push-路径-query-跳转</button>
</template>

<script setup>
import {useRouter, useRoute} from 'vue-router'

const router =useRouter()
console.log('router',router);

const route = useRoute()
console.log('route',route);

const pushStr = () => {
    router.push('/about')
}

const pushPath= () =>{
    router.push({path:'/about'})
}

const pushName= () =>{
    router.push({name:'about'})
}

const pushNameParams = () =>{
    router.push({name:'about', state:{params:{name:'tom'}}})
}
const pushPathQuery = () =>{
    router.push({path:'/about',query:{name:'tom',age:1}})
}
</script>